
<form>
    <div class="form-row">
        <div class="form-group col-md-2">
            <label for="">类型</label>
            <select class="form-control " v-model="type" @change="changeType">
                <option v-for="option in options" v-bind:value="option.value">
                    {{ option.value }}
                </option>
            </select>
        </div>
        <div class="form-group  col-md-6">
            <label for="">标题</label>
            <input v-model.trim="title" type="text" class="form-control">
        </div>
    </div>
    <div class="form-group">
        <label for="">标签</label>
        <input v-model.trim="tags"  name="tags" id="tags" />
    </div>
    <div class="form-group">
        <label for="">内容</label>
        <textarea v-model.trim="content" type="text" class="form-control" rows="8"></textarea>
        <button type="button" class="btn btn-primary" @click="submit">Submit</button>
    </div>
</form>




<script type="text/javascript">
    let id = '<?= $id ?? ""?>';
    let type = '<?= $type ?? ""?>';
    let options = [];
    let default_type = $.cookie('default_type');
    if (type.length) {
        let types = JSON.parse(type);
        for(let i = 0,len = types.length; i < len; i++) {
            if (i === 0 && default_type === undefined) default_type = types[i]
            options.push({value: types[i]})
        }
    }
    // toastr.subscribe(() => {
    //     console.log("logged something");
    // });

    let params = {
        el: '#app',
        data: {
            id : id,
            options : options,
            info: null,
            title: null,
            type: default_type,
            tags: '',
            content : '',
            cookie : $.cookie
        },
        mounted: function () {
            // $.prototype.cookie = $.cookie;

            let that = this;
            let params = {
                id: that.id
            };

            let tagsObj = $('#tags');
            tagsObj.tagsInput({
                outCall : function (e) {
                    console.log(e)
                    that.tags = e
                }
            })

            if (that.id > 0) {
                post('/English/words_info', params, function (e) {
                    let info = e.data;
                    if (info != null) {
                        // that.tags = info.tags.join(',');
                        that.title = info.title;
                        that.type = info.type;
                        that.content = info.content;
                        for(j = 0,len=info.tags.length; j < len; j++) {
                            tagsObj.addTag(info.tags[j])
                        }
                    }
                });
            }

        },

        methods: {
            changeType : function () {
                this.cookie('default_type', this.type)
            },
            submit : function () {
                let that = this;
                let params = {
                    id: this.id,
                    type: this.type,
                    title: this.title,
                    tags: this.tags,
                    content: this.content,
                };

                post('', params, function (e) {
                    //询问提示
                    toastr.success(e.msg, '',
                        {
                            timeOut: 2000,
                            onHidden: function (){
                                if (e.code === 1000) {
                                    window.location.reload();
                                }
                            }
                        });
                })
            }
        }
    };
    var app = new Vue($.extend(true, params, global));


</script>